/*
 * @Author: mikey.zhaopeng
 * @Date:   2016-06-14 18:09:55
 * @Last Modified by:   mikey.zhaopeng
 * @Last Modified time: 2016-07-13 16:32:28
 */

'use strict';
define([
    '../../../app/framework/base/baseView',
    '../../../app/pages/createMaterial/step3/saveDialog',
    '../../../app/pages/createMaterial/step3/previewDialog',
    '../../../app/pages/createMaterial/adPreview/desktopfeed',
    '../../../app/pages/createMaterial/adPreview/instagramstream',
    '../../../app/pages/createMaterial/adPreview/mobileexternal',
    '../../../app/pages/createMaterial/adPreview/mobilefeed',
    '../../../app/pages/createMaterial/adPreview/rightcolumn'
], function(
    BaseView,
    SaveDialogView,
    PreviewDialogView,
    DesktopfeedView,
    InstagramstreamView,
    MobileexternalView,
    MobilefeedView,
    RightcolumnView
) {
    function me() {
        BaseView.apply(this, arguments);
        var self = this;
        this.init = function($root, adPlaces, previewImg) {
            self.$root = $root;
            self.adPlaces = adPlaces;
            self.previewImg = previewImg;
            self.adPreview = {};
            self.adPreview.desktopfeed = new DesktopfeedView();
            self.adPreview.instagramstream = new InstagramstreamView();
            self.adPreview.mobileexternal = new MobileexternalView();
            self.adPreview.mobilefeed = new MobilefeedView();
            self.adPreview.rightcolumn = new RightcolumnView();
            self.render();
        }

        this.render = function() {
            self.$root.find('.switch-preview [data-type]').addClass('hidden');
            _.each(self.adPlaces, function(el) {
                self.$root.find('.switch-preview [data-type="' + el + '"]').removeClass('hidden');
            });
            self.adjuestWidth();
            self.event();
            self.$root.find('.switch-preview a:not(.hidden):first').trigger('click');
        }

        this.event = function() {
            self.$root.find('.switch-preview a').off('click').on('click', $.proxy(self.switchPreview, self));
            self.$root.find('.btn-save').off('click').on('click', $.proxy(self.save, self));
            self.$root.find('.btn-preview').off('click').on('click', $.proxy(self.openPreviewDialog, self));
            $(window).resize($.proxy(self.adjuestWidth, self));
        }


        /**
         * [adjuestWidth 调整 right 预览宽度]
         * @return {[type]} [description]
         */
        this.adjuestWidth = function() {
            setTimeout(function() {
                var w = $('.fmp-container').width() - ($('.fmp-container .layout-center').width() + $('.fmp-container .layout-left').width() + 80) - 10;
                self.$root.css({
                    'width': ((w-10) + 'px')
                })
                var t = $('.layout-center').height() - $('.layout-right .body').height() - 50;
                self.$root.find('.preview-footer').css({
                    'margin-top': (t + 'px')
                })

            }, 500);
        }

        this.switchPreview = function(e) {
            var $cur = $(e.currentTarget);
            var type = $cur.data('type');
            self.adPreview[type].init(self.$root.find('.ad-preview'), self.previewImg);
            if ($cur.hasClass('active')) {
                return false;
            }
            self.$root.find('.switch-preview .active').removeClass('active');
            self.$root.find('.switch-preview .triangle-up').remove();
            $cur.before('<div class="triangle-up"></div>');
            $cur.addClass('active');
        }

        this.save = function(e) {
            var dialogParams = {
                previewImg: self.previewImg,
                editType: 'edit'
            }
            new SaveDialogView().init($.proxy(self.saveOK, self), dialogParams);
        }

        this.saveOK = function() {
            setTimeout(function() {
                window.location.hash = '#!materialTemplate';
            });
        }

        /**
         * [openPreviewDialog 查看更多]
         * @param  {[type]} e [description]
         * @return {[type]}   [description]
         */
        this.openPreviewDialog = function(e) {
            var elements = [];
            var $mainEle = $('input[name="main-element"]');
            var $lesserEle = $('input[name="lesser-element"]');
            var mEle = {
                context: $mainEle.val(),
                elementCategoryCode: $mainEle.attr('code'),
                fillValue: $mainEle.parent().find('input[type=number]').val(),
                isMajor: $mainEle.attr('major'),
                major: $mainEle.attr('major'),
                parentCode: $mainEle.attr('code'),
                pid: $mainEle.attr('pid'),
                elementCode: $mainEle.attr('elementCode'),
                templateElementId: $mainEle.attr('templateElementId'),
                backgroundColor: $mainEle.attr('bgColor'),
                wordColor: $mainEle.attr('wordColor')
            }
            var lEle = {
                context: $lesserEle.val(),
                elementCategoryCode: $lesserEle.attr('code'),
                fillValue: $lesserEle.parent().find('input[type=number]').val(),
                isMajor: $lesserEle.attr('major'),
                major: $lesserEle.attr('major'),
                parentCode: $lesserEle.attr('code'),
                pid: $lesserEle.attr('pid'),
                elementCode: $lesserEle.attr('elementCode'),
                templateElementId: $lesserEle.attr('templateElementId'),
                backgroundColor: $lesserEle.attr('bgColor'),
                wordColor: $lesserEle.attr('wordColor')
            }
            elements.push(mEle);
            elements.push(lEle);
            var previewParams = {
                wefeedid: $('input[name=feed-name]').data('id'),
                ecTemplateId: $('input[name=feed-name]').data('templateid'),
                more: true,
                elements: elements
            }
            new PreviewDialogView().init(null, 'edit', previewParams);
        }
    }
    return me;
});
